<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>网易云音乐</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C62F2F', // 网易云红色
                        secondary: '#2E3033', // 深色背景
                        'secondary-light': '#3A3C40', // 浅深色背景
                        'text-gray': '#86898C', // 灰色文本
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center py-2 px-4 text-gray-300 hover:bg-secondary-light hover:text-white rounded transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .song-item {
                @apply flex items-center py-2 px-3 hover:bg-secondary-light rounded transition-all duration-200;
            }
            .playlist-card {
                @apply bg-secondary rounded-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-primary/10;
            }
        }
    </style>
    
    <style>
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #e45959;
        }
        ::-webkit-scrollbar-thumb {
            background: #555;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #888;
        }
        
        /* 进度条样式 */
        .progress-container {
            height: 3px;
            background-color: rgba(255, 255, 255, 0.1);
            cursor: pointer;
        }
        .progress-bar {
            height: 100%;
            background-color: #C62F2F;
            width: 35%;
            position: relative;
        }
        .progress-bar::after {
            content: '';
            position: absolute;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: white;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .progress-container:hover .progress-bar::after {
            opacity: 1;
        }
        
        /* 播放动画 */
        @keyframes play {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }
        .play-animation span {
            display: inline-block;
            width: 3px;
            height: 16px;
            margin: 0 1px;
            background-color: #C62F2F;
            border-radius: 3px;
            animation: play 1s ease-in-out infinite;
        }
        .play-animation span:nth-child(2) {
            animation-delay: 0.2s;
            height: 24px;
        }
        .play-animation span:nth-child(3) {
            animation-delay: 0.4s;
            height: 20px;
        }
        
        /* 轮播图动画 */
        .carousel {
            transition: transform 0.5s ease-in-out;
        }
    </style>
</head>
<body class="bg-secondary text-white font-sans min-h-screen flex flex-col">
    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <aside class="w-64 bg-secondary-light p-4 overflow-y-auto hidden md:block">
            <!-- 网易云logo -->
            <div class="flex items-center mb-8 pt-2">
                <div class="play-animation mr-3">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <h1 class="text-2xl font-bold text-white">网易云音乐</h1>
            </div>
            
            <!-- 主导航 -->
            <div class="mb-6">
                <div class="sidebar-item active">
                    <i class="fa fa-home w-6"></i>
                    <span class="ml-3">发现音乐</span>
                </div>
                <div class="sidebar-item">
                    <i class="fa fa-compass w-6"></i>
                    <span class="ml-3">私人FM</span>
                </div>
                <div class="sidebar-item">
                    <i class="fa fa-clock-o w-6"></i>
                    <span class="ml-3">最近播放</span>
                </div>
            </div>
            
            <!-- 我的音乐 -->
            <div class="mb-6">
                <h3 class="text-xs uppercase text-text-gray font-semibold mb-3 px-4">我的音乐</h3>
                <div class="sidebar-item">
                    <i class="fa fa-heart w-6"></i>
                    <span class="ml-3">我喜欢的音乐</span>
                </div>
                <div class="sidebar-item">
                    <i class="fa fa-list w-6"></i>
                    <span class="ml-3">我的歌单</span>
                </div>
                <div class="sidebar-item">
                    <i class="fa fa-download w-6"></i>
                    <span class="ml-3">下载管理</span>
                </div>
            </div>
            
            <!-- 推荐歌单 -->
            <div>
                <h3 class="text-xs uppercase text-text-gray font-semibold mb-3 px-4">推荐歌单</h3>
                <div class="sidebar-item">
                    <i class="fa fa-music w-6"></i>
                    <span class="ml-3 truncate">华语热门</span>
                </div>
                <div class="sidebar-item">
                    <i class="fa fa-music w-6"></i>
                    <span class="ml-3 truncate">摇滚精选</span>
                </div>
                <div class="sidebar-item">
                    <i class="fa fa-music w-6"></i>
                    <span class="ml-3 truncate">电子音乐</span>
                </div>
                <div class="sidebar-item">
                    <i class="fa fa-music w-6"></i>
                    <span class="ml-3 truncate">轻音乐</span>
                </div>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto p-6">
            <!-- 顶部搜索栏 -->
            <div class="mb-8">
                <div class="relative max-w-2xl">
                    <input type="text" placeholder="搜索歌曲、歌手、专辑" 
                        class="w-full bg-secondary-light rounded-full py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-text-gray"></i>
                </div>
            </div>
            
            <!-- 轮播图 -->
            <div class="relative rounded-xl overflow-hidden mb-10 h-64 md:h-80">
                <div class="carousel flex h-full">
                    <div class="min-w-full h-full">
                        <img src="https://picsum.photos/id/1035/1200/500" alt="推荐专辑" class="w-full h-full object-cover">
                    </div>
                    <div class="min-w-full h-full">
                        <img src="https://picsum.photos/id/1039/1200/500" alt="推荐专辑" class="w-full h-full object-cover">
                    </div>
                    <div class="min-w-full h-full">
                        <img src="https://picsum.photos/id/1042/1200/500" alt="推荐专辑" class="w-full h-full object-cover">
                    </div>
                </div>
                
                <!-- 轮播控制按钮 -->
                <button class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-black/30 rounded-full flex items-center justify-center backdrop-blur-sm hover:bg-black/50 transition-colors">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <button class="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-black/30 rounded-full flex items-center justify-center backdrop-blur-sm hover:bg-black/50 transition-colors">
                    <i class="fa fa-chevron-right"></i>
                </button>
                
                <!-- 轮播指示器 -->
                <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
                    <span class="w-2 h-2 rounded-full bg-white"></span>
                    <span class="w-2 h-2 rounded-full bg-white/50"></span>
                    <span class="w-2 h-2 rounded-full bg-white/50"></span>
                </div>
            </div>
            
            <!-- 热门推荐 -->
            <section class="mb-10">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold">热门推荐</h2>
                    <a href="#" class="text-text-gray text-sm hover:text-white transition-colors">查看更多 <i class="fa fa-angle-right ml-1"></i></a>
                </div>
                
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                    <!-- 推荐歌单1 -->
                    <div class="playlist-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/1025/300" alt="歌单封面" class="w-full aspect-square object-cover">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-semibold line-clamp-2 h-12">夏日限定 | 那些关于夏天的回忆</h3>
                            <p class="text-xs text-text-gray mt-1 line-clamp-1">32首歌曲 · 2.4万次播放</p>
                        </div>
                    </div>
                    
                    <!-- 推荐歌单2 -->
                    <div class="playlist-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/1074/300" alt="歌单封面" class="w-full aspect-square object-cover">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-semibold line-clamp-2 h-12">深夜治愈 | 轻音乐助你入眠</h3>
                            <p class="text-xs text-text-gray mt-1 line-clamp-1">45首歌曲 · 5.7万次播放</p>
                        </div>
                    </div>
                    
                    <!-- 推荐歌单3 -->
                    <div class="playlist-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/1082/300" alt="歌单封面" class="w-full aspect-square object-cover">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-semibold line-clamp-2 h-12">华语经典 | 那些年我们听过的歌</h3>
                            <p class="text-xs text-text-gray mt-1 line-clamp-1">68首歌曲 · 12.3万次播放</p>
                        </div>
                    </div>
                    
                    <!-- 推荐歌单4 -->
                    <div class="playlist-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/1062/300" alt="歌单封面" class="w-full aspect-square object-cover">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-semibold line-clamp-2 h-12">运动健身 | 燃曲助你突破极限</h3>
                            <p class="text-xs text-text-gray mt-1 line-clamp-1">36首歌曲 · 8.9万次播放</p>
                        </div>
                    </div>
                    
                    <!-- 推荐歌单5 -->
                    <div class="playlist-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/1059/300" alt="歌单封面" class="w-full aspect-square object-cover">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-semibold line-clamp-2 h-12">爵士风情 | 慵懒午后的最佳伴侣</h3>
                            <p class="text-xs text-text-gray mt-1 line-clamp-1">28首歌曲 · 3.2万次播放</p>
                        </div>
                    </div>
                    
                    <!-- 推荐歌单6 -->
                    <div class="playlist-card">
                        <div class="relative">
                            <img src="https://picsum.photos/id/1079/300" alt="歌单封面" class="w-full aspect-square object-cover">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-3">
                            <h3 class="text-sm font-semibold line-clamp-2 h-12">电子舞曲 | 夜店热播榜</h3>
                            <p class="text-xs text-text-gray mt-1 line-clamp-1">52首歌曲 · 7.6万次播放</p>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 最新专辑 -->
            <section class="mb-10">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold">最新专辑</h2>
                    <a href="#" class="text-text-gray text-sm hover:text-white transition-colors">查看更多 <i class="fa fa-angle-right ml-1"></i></a>
                </div>
                
                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
                    <!-- 专辑1 -->
                    <div class="text-center">
                        <div class="relative mb-3">
                            <img src="https://picsum.photos/id/1005/300" alt="专辑封面" class="w-full aspect-square object-cover rounded">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                            <span class="absolute -bottom-1 -right-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded">新</span>
                        </div>
                        <h3 class="text-sm font-semibold line-clamp-1">夏日时光</h3>
                        <p class="text-xs text-text-gray mt-1">歌手：音乐达人</p>
                    </div>
                    
                    <!-- 专辑2-5 类似结构 -->
                    <div class="text-center">
                        <div class="relative mb-3">
                            <img src="https://picsum.photos/id/1012/300" alt="专辑封面" class="w-full aspect-square object-cover rounded">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <h3 class="text-sm font-semibold line-clamp-1">城市漫游</h3>
                        <p class="text-xs text-text-gray mt-1">歌手：都市之声</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="relative mb-3">
                            <img src="https://picsum.photos/id/1027/300" alt="专辑封面" class="w-full aspect-square object-cover rounded">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <h3 class="text-sm font-semibold line-clamp-1">星空之下</h3>
                        <p class="text-xs text-text-gray mt-1">歌手：宇宙旋律</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="relative mb-3">
                            <img src="https://picsum.photos/id/1074/300" alt="专辑封面" class="w-full aspect-square object-cover rounded">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                            <span class="absolute -bottom-1 -right-1 bg-primary text-white text-xs px-1.5 py-0.5 rounded">新</span>
                        </div>
                        <h3 class="text-sm font-semibold line-clamp-1">雨后彩虹</h3>
                        <p class="text-xs text-text-gray mt-1">歌手：自然之声</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="relative mb-3">
                            <img src="https://picsum.photos/id/177/300" alt="专辑封面" class="w-full aspect-square object-cover rounded">
                            <div class="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center transform translate-y-2 hover:translate-y-0 transition-transform">
                                    <i class="fa fa-play ml-0.5"></i>
                                </button>
                            </div>
                        </div>
                        <h3 class="text-sm font-semibold line-clamp-1">回忆碎片</h3>
                        <p class="text-xs text-text-gray mt-1">歌手：往事随风</p>
                    </div>
                </div>
            </section>
            
            <!-- 排行榜 -->
            <section>
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold">热歌榜</h2>
                    <a href="#" class="text-text-gray text-sm hover:text-white transition-colors">查看完整榜单 <i class="fa fa-angle-right ml-1"></i></a>
                </div>
                
                <div class="bg-secondary-light rounded-lg p-4">
                    <ul>
                        <!-- 歌曲1-10 -->
                        <li class="song-item">
                            <div class="w-8 text-center font-bold text-primary">1</div>
                            <div class="flex-1 ml-4">
                                <div class="flex items-center">
                                    <h3 class="text-sm font-medium">夏日晚风</h3>
                                    <span class="ml-2 text-xs bg-primary/20 text-primary px-1.5 py-0.5 rounded">热</span>
                                </div>
                                <p class="text-xs text-text-gray mt-0.5">音乐人A - 夏日专辑</p>
                            </div>
                            <div class="flex items-center">
                                <span class="text-xs text-text-gray mr-4">3:45</span>
                                <button class="text-text-gray hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                    <i class="fa fa-play"></i>
                                </button>
                            </div>
                        </li>
                        
                        <li class="song-item">
                            <div class="w-8 text-center font-bold text-primary">2</div>
                            <div class="flex-1 ml-4">
                                <div class="flex items-center">
                                    <h3 class="text-sm font-medium">城市之光</h3>
                                </div>
                                <p class="text-xs text-text-gray mt-0.5">音乐人B - 城市故事</p>
                            </div>
                            <div class="flex items-center">
                                <span class="text-xs text-text-gray mr-4">4:12</span>
                                <button class="text-text-gray hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                    <i class="fa fa-play"></i>
                                </button>
                            </div>
                        </li>
                        
                        <li class="song-item">
                            <div class="w-8 text-center font-bold text-primary">3</div>
                            <div class="flex-1 ml-4">
                                <div class="flex items-center">
                                    <h3 class="text-sm font-medium">星辰大海</h3>
                                    <span class="ml-2 text-xs bg-primary/20 text-primary px-1.5 py-0.5 rounded">热</span>
                                </div>
                                <p class="text-xs text-text-gray mt-0.5">音乐人C - 宇宙漫游</p>
                            </div>
                            <div class="flex items-center">
                                <span class="text-xs text-text-gray mr-4">3:58</span>
                                <button class="text-text-gray hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                    <i class="fa fa-play"></i>
                                </button>
                            </div>
                        </li>
                        
                        <li class="song-item">
                            <div class="w-8 text-center font-bold text-gray-400">4</div>
                            <div class="flex-1 ml-4">
                                <div class="flex items-center">
                                    <h3 class="text-sm font-medium">时光机</h3>
                                </div>
                                <p class="text-xs text-text-gray mt-0.5">音乐人D - 回忆</p>
                            </div>
                            <div class="flex items-center">
                                <span class="text-xs text-text-gray mr-4">4:05</span>
                                <button class="text-text-gray hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                    <i class="fa fa-play"></i>
                                </button>
                            </div>
                        </li>
                        
                        <li class="song-item">
                            <div class="w-8 text-center font-bold text-gray-400">5</div>
                            <div class="flex-1 ml-4">
                                <div class="flex items-center">
                                    <h3 class="text-sm font-medium">雨中漫步</h3>
                                </div>
                                <p class="text-xs text-text-gray mt-0.5">音乐人E - 自然之声</p>
                            </div>
                            <div class="flex items-center">
                                <span class="text-xs text-text-gray mr-4">3:30</span>
                                <button class="text-text-gray hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                    <i class="fa fa-play"></i>
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        </main>
    </div>
    
    <!-- 底部播放控制栏 -->
    <footer class="h-20 bg-secondary-light border-t border-gray-800 flex items-center px-4 md:px-6">
        <div class="flex items-center w-1/4">
            <!-- 当前播放歌曲信息 -->
            <img src="https://picsum.photos/id/1025/100" alt="当前播放歌曲封面" class="w-12 h-12 object-cover">
            <div class="ml-3 overflow-hidden">
                <h4 class="text-sm font-medium truncate">夏日晚风</h4>
                <p class="text-xs text-text-gray truncate">音乐人A</p>
            </div>
            <button class="ml-4 text-text-gray hover:text-primary transition-colors">
                <i class="fa fa-heart-o"></i>
            </button>
        </div>
        
        <!-- 播放控制 -->
        <div class="flex-1 flex flex-col items-center justify-center px-4">
            <div class="flex items-center mb-2">
                <button class="text-text-gray hover:text-white transition-colors mx-2">
                    <i class="fa fa-random"></i>
                </button>
                <button class="text-text-gray hover:text-white transition-colors mx-2">
                    <i class="fa fa-step-backward"></i>
                </button>
                <button class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mx-2 hover:bg-primary/90 transition-colors">
                    <i class="fa fa-pause ml-0.5"></i>
                </button>
                <button class="text-text-gray hover:text-white transition-colors mx-2">
                    <i class="fa fa-step-forward"></i>
                </button>
                <button class="text-text-gray hover:text-white transition-colors mx-2">
                    <i class="fa fa-repeat"></i>
                </button>
            </div>
            
            <div class="flex items-center w-full max-w-2xl">
                <span class="text-xs text-text-gray mr-2">1:23</span>
                <div class="progress-container flex-1">
                    <div class="progress-bar"></div>
                </div>
                <span class="text-xs text-text-gray ml-2">3:45</span>
            </div>
        </div>
        
        <!-- 音量控制 -->
        <div class="w-1/4 flex items-center justify-end">
            <button class="text-text-gray hover:text-white transition-colors mx-2 hidden sm:block">
                <i class="fa fa-list"></i>
            </button>
            <button class="text-text-gray hover:text-white transition-colors mx-2 hidden sm:block">
                <i class="fa fa-volume-up"></i>
            </button>
            <div class="progress-container w-24 hidden md:block">
                <div class="progress-bar" style="width: 70%"></div>
            </div>
        </div>
    </footer>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 轮播图功能
            const carousel = document.querySelector('.carousel');
            const prevBtn = document.querySelector('.carousel ~ button:first-of-type');
            const nextBtn = document.querySelector('.carousel ~ button:last-of-type');
            const indicators = document.querySelectorAll('.carousel ~ div span');
            let currentSlide = 0;
            const slideCount = 3;
            
            // 更新轮播图位置
            function updateCarousel() {
                carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
                
                // 更新指示器
                indicators.forEach((indicator, index) => {
                    if (index === currentSlide) {
                        indicator.classList.add('bg-white');
                        indicator.classList.remove('bg-white/50');
                    } else {
                        indicator.classList.remove('bg-white');
                        indicator.classList.add('bg-white/50');
                    }
                });
            }
            
            // 上一张
            prevBtn.addEventListener('click', () => {
                currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                updateCarousel();
            });
            
            // 下一张
            nextBtn.addEventListener('click', () => {
                currentSlide = (currentSlide + 1) % slideCount;
                updateCarousel();
            });
            
            // 点击指示器切换
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    currentSlide = index;
                    updateCarousel();
                });
            });
            
            // 自动轮播
            setInterval(() => {
                currentSlide = (currentSlide + 1) % slideCount;
                updateCarousel();
            }, 5000);
            
            // 播放控制
            const playBtn = document.querySelector('.fa-pause').parentElement;
            const progressBar = document.querySelector('.progress-container .progress-bar');
            let isPlaying = true;
            
            playBtn.addEventListener('click', () => {
                const icon = playBtn.querySelector('i');
                if (isPlaying) {
                    icon.classList.remove('fa-pause');
                    icon.classList.add('fa-play');
                } else {
                    icon.classList.remove('fa-play');
                    icon.classList.add('fa-pause');
                }
                isPlaying = !isPlaying;
            });
            
            // 进度条点击
            const progressContainer = document.querySelector('.progress-container');
            progressContainer.addEventListener('click', (e) => {
                const rect = progressContainer.getBoundingClientRect();
                const pos = (e.clientX - rect.left) / rect.width;
                progressBar.style.width = `${pos * 100}%`;
                
                // 更新时间显示
                const totalSeconds = 225; // 3:45 in seconds
                const currentSeconds = Math.floor(totalSeconds * pos);
                const minutes = Math.floor(currentSeconds / 60);
                const seconds = currentSeconds % 60;
                document.querySelector('.progress-container ~ span:first-of-type').textContent = 
                    `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
            });
            
            // 歌曲项悬停效果
            const songItems = document.querySelectorAll('.song-item');
            songItems.forEach(item => {
                item.addEventListener('mouseenter', () => {
                    const playBtn = item.querySelector('.fa-play').parentElement;
                    playBtn.style.opacity = '1';
                });
                
                item.addEventListener('mouseleave', () => {
                    const playBtn = item.querySelector('.fa-play').parentElement;
                    playBtn.style.opacity = '0';
                });
            });
        });
    </script>
</body>
</html>
    